<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick" type='card'>
      <el-tab-pane :label="item.tab+'('+item.total+')'" :name="item.name" v-for="(item) in tabs" :key='item.id'>
      </el-tab-pane>
      <nopost v-if="tabIndex==0"></nopost>
      <company v-else-if="tabIndex==1"></company>
      <post v-else-if="tabIndex==2"></post>
    </el-tabs>
  </div>
</template>

<script>
import formOperate from '@/layout/mixin/formOperate'
import post from './post'
import nopost from './nopost'
import company from './company'
export default {
  props:{
    dataCount:{
      type:Object,
      default:()=>{
        return {}
      }
    }
  },
  name: 'Index',
  mixins: [formOperate],
  data() {
    return {
      activeName: 'first',// tabs默认第几个展开
      tabs:[
        {id:1,tab:'未发布职位用户',name:'first',total:0},
        {id:2,tab:'未审核企业',name:'second',total:0},
        {id:3,tab:'未审核职位',name:'third',total:0}
      ],
      tabIndex:0
    }
  },
  watch:{
    dataCount() {
      this.tabs[0].total = this.dataCount.not_post || 0
      this.tabs[1].total = this.dataCount.not_verify_company || 0
      this.tabs[2].total = this.dataCount.not_verify_post || 0
    }
  },
  mounted() {
    this.tabs[0].total = this.dataCount.not_post || 0
    this.tabs[1].total = this.dataCount.not_verify_company || 0
    this.tabs[2].total = this.dataCount.not_verify_post || 0
  },
  methods: {
    // tab切换
    handleClick(tab) {
      this.tabIndex = tab.index
    }
  },
  components:{
    post,
    nopost,
    company
  }
}
</script>